import React, { useState, useEffect } from 'react';
import { Modal, Tabs, Typography, Collapse } from 'antd';
import { ExclamationCircleOutlined, InfoCircleOutlined } from '@ant-design/icons';

const { Text, Paragraph } = Typography;
const { Panel } = Collapse;
const { TabPane } = Tabs;

const GlobalErrorModal = ({ error, requestInfo, responseInfo, onClose }) => {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (error) {
      setVisible(true);
    }
  }, [error]);

  const handleOk = () => {
    setVisible(false);
    onClose && onClose();
  };

  const handleCancel = () => {
    setVisible(false);
    onClose && onClose();
  };

  return (
    <Modal
      title={
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <ExclamationCircleOutlined style={{ color: '#ff4d4f', marginRight: 8, fontSize: 20 }} />
          <span style={{ color: '#333' }}>请求异常</span>
        </div>
      }
      open={visible}
      onOk={handleOk}
      onCancel={handleCancel}
      width={800}
      okText="确认"
      cancelText="关闭"
    >
      <div style={{ marginBottom: 16 }}>
        <Text type="danger" style={{ backgroundColor: '#ffebea', padding: '8px', borderRadius: '4px' }}>
          <strong>错误信息:</strong> {error?.message || '请求失败'}
        </Text>
      </div>

      <Tabs defaultActiveKey="1">
        <TabPane
          tab={
            <span>
              <InfoCircleOutlined />
              调试指南
            </span>
          }
          key="1"
        >
          <Paragraph style={{ backgroundColor: '#f5f5f5', padding: '12px', borderRadius: '4px' }}>
            <blockquote style={{ borderLeft: '3px solid #333', paddingLeft: 12, margin: 0 }}>
              <p>请打开浏览器的开发者工具（按F12或右键点击页面选择"检查"）进行进一步排查</p>
              <ul>
                <li>在 Network 标签中查看请求和响应详情  检查接口的 地址 状态码 入参 出参 </li>
                <li>在 Console 标签中查看详细错误信息</li>
              </ul>
            </blockquote>
          </Paragraph>
        </TabPane>
        <TabPane
          tab={
            <span>
              <InfoCircleOutlined />
              请求信息
            </span>
          }
          key="2"
        >
          <Collapse>
            <Panel header="请求地址和方法" key="1">
              <Paragraph style={{ color: '#333' }}>
                <Text strong>URL:</Text> {requestInfo?.url}
                <br />
                <Text strong>Method:</Text> {requestInfo?.method?.toUpperCase()}
              </Paragraph>
            </Panel>
            <Panel header="请求参数" key="2">
              <pre style={{ background: '#f5f5f5', padding: 12, borderRadius: 4, overflowX: 'auto', color: '#333' }}>
                {requestInfo?.params ? JSON.stringify(requestInfo.params, null, 2) : '无'}
              </pre>
            </Panel>
            <Panel header="请求数据" key="3">
              <pre style={{ background: '#f5f5f5', padding: 12, borderRadius: 4, overflowX: 'auto', color: '#333' }}>
                {requestInfo?.data ? JSON.stringify(requestInfo.data, null, 2) : '无'}
              </pre>
            </Panel>
            <Panel header="请求头" key="4">
              <pre style={{ background: '#f5f5f5', padding: 12, borderRadius: 4, overflowX: 'auto', color: '#333' }}>
                {requestInfo?.headers ? JSON.stringify(requestInfo.headers, null, 2) : '无'}
              </pre>
            </Panel>
          </Collapse>
        </TabPane>
        <TabPane
          tab={
            <span>
              <InfoCircleOutlined />
              响应信息
            </span>
          }
          key="3"
        >
          <Collapse>
            <Panel header="响应状态" key="1">
              <Paragraph style={{ color: '#333' }}>
                <Text strong>状态码:</Text> {responseInfo?.status}
                <br />
                <Text strong>状态文本:</Text> {responseInfo?.statusText}
              </Paragraph>
            </Panel>
            <Panel header="响应头" key="2">
              <pre style={{ background: '#f5f5f5', padding: 12, borderRadius: 4, overflowX: 'auto', color: '#333' }}>
                {responseInfo?.headers ? JSON.stringify(responseInfo.headers, null, 2) : '无'}
              </pre>
            </Panel>
            <Panel header="响应数据" key="3">
              <pre style={{ background: '#f5f5f5', padding: 12, borderRadius: 4, overflowX: 'auto', color: '#333' }}>
                {responseInfo?.data ? JSON.stringify(responseInfo.data, null, 2) : '无'}
              </pre>
            </Panel>
          </Collapse>
        </TabPane>
      </Tabs>
    </Modal>
  );
};

export default GlobalErrorModal;
